<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        /*不同的浏览器展示不同，所以要先清除内外边距*/
        *{
            margin: 0;
            padding: 0;
        }


        /**
        定位 position
              定位属性包括：定位模式+边偏移 = 完整定位
              定位模式: position: static(自动定位 默认，写不写都一样，边偏移不生效；一般用来清除定位)
                                 relative（相对原来的文档流定位）
                                 absolute（相对于其中一个已经定位的父元素）
                                 fixed(相对于浏览器窗口)
              边偏移：top bottom left right
              如：div{
                  top:100px;
                  left:100px;
                  position:absolute;
              }

         */

        div{
            height: 100px;
            width: 100px;
            background-color: orange;
        }
        /**
        static(自动定位 默认，写不写都一样，边偏移不生效；一般用来清除定位)
         */
        .static-pos{
            background-color: purple;

            position:static;
            top:100px;
            left:100px;
        }

        /**
        relative（
        相对原来的文档流定位,也就是相对于自己的原始位置
        移动后原来位置保留，后面的盒子任然是标准流,不脱标
         */
        .relative-pos{
            background-color: purple;

            position:relative;
            top:50px;
            left:100px;
        }

        /**
        absolute（相对于其中一个已经定位的父元素,如果父元素没有定位，相对于浏览器窗口；
        完全脱标，不占位置
        定位后，
        后面的元素会占用该绝对定位元素的位置，会脱离标准流

        一般使用将父级元素设置相对定位（也可绝对定位），子元素设置绝对定位
         */
        .absolute-pos{
            background-color: purple;

            position:absolute;
            top:50px;
            left:100px;
        }


        /**
        子绝父相 重要
        一般使用将父级元素设置相对定位（也可绝对定位），子元素设置绝对定位

        相对定位占位置，不脱标； 绝对定位不占位置，完全脱标
         */

        /**
        子绝父相后，子盒子如何垂直、水平居中？
            margin 0 auto不生效

          水平居中：
            left:50%;
            margin-left: -盒子宽度/2

          垂直居中：
            top:50%;
            margin-top:  -盒子高度/2

         */


        /**
         fixed(相对于浏览器窗口)
                     和父元素没有任何关系，只认浏览器
                     完全脱标 不占位置 不随滚动条滚动而滚动
         */


        /**
        定位元素的重叠问题
        z-index:1;   // 放在最上面  值越大越在上面；默认值都是0，根据书写顺序决定；无单位
         */


        /**
        绝对定位和固定定位脱标，会将元素转换成行内块，如果没有设置宽度，会使用内容的宽度
         */


        /**
        元素的隐藏与现实 广告、下拉菜单的做法
                display: none(隐藏，不保留位置;元素还在)   block（显示）    常用
                visibility: hidden(隐藏，保留位置)      visible（显示）
         */

        /**
        186 检索或设置当对象的内容超过其指定的高度或者宽度时该如何管理内容
        overflow:
                  visible 不处理超出的内容 默认
                  auto：超出显示滚动条，不超出不显示滚动条
                  scroll: 一直显示滚动条
                  overflow: 隐藏超出部分，常用   溢出隐藏

         */

    </style>
</head>


    <div class="static-pos">static</div>

    <br><br><br><br><br>------------------------
        <div>1</div>
        <div class="relative-pos">relative</div>
        <div>3</div>

    <br><br><br><br><br>------------------------
        <div class="absolute-pos">absolute</div>
        <div >sss</div>

<body>

</body>

</html>
